<template>
  <zh-form ref="formRef" style="width: 96%" :md="12" :lg="12" :xl="12" :model="form" :rules="rules" labelWidth="150">
    <zh-form-radio :sm="12" :lg="12" :xl="8" label="是否作为通用设置" prop="transferIsCommon"
                   :disabled="radioDisabled"
                   v-model="form.transferIsCommon" :options="dictFlag"></zh-form-radio>
    <zh-form-select
        v-if="form.transferIsCommon === '0'"
        prop="processKey"
        label="业务名称"
        placeholder="单选"
        :span="12"
        :options="state.dictData.processNameList"
        v-model="form.processKey"
    ></zh-form-select>
    <zh-row>
      <zh-col :span="12">
        <zh-form-date
            :span="24"
            prop="transferStartTime"
            label="转办开始时间"
            placeholder="请输入转办开始时间"
            type="date"
            v-model="form.transferStartTime"
        ></zh-form-date>
      </zh-col>
      <zh-col :span="12">
        <zh-form-date
            :span="24"
            prop="transferEndTime"
            label="转办截至时间"
            placeholder="请输入转办截至时间"
            type="date"
            v-model="form.transferEndTime"
        ></zh-form-date>
      </zh-col>
    </zh-row>
    <el-form-item label="选择被转办人员">
      <el-button
          type="primary"
          icon="el-icon-plus"
          round
          @click="selectHandle(1, form.nodeUserList)"
      >选择人员</el-button
      >
      <div class="tags-list">
        <el-tag
            v-if="form.nodeUserList.length > 0"
            closable
            @close="del"
        >{{ form.nodeUserList[0].name }}</el-tag
        >
      </div>
    </el-form-item>

    <zh-form-input
        type="textarea"
        :span="24"
        label="转办原因"
        prop="transferReason"
        v-model="form.transferReason"
        placeholder="请输入转办原因"
    ></zh-form-input>

  </zh-form>

  <use-select
      v-if="selectVisible"
      ref="useselect"
      @closed="selectVisible = false"></use-select>
</template>

<script lang="ts" setup name="userConfigForm">
import {ElMessage } from 'element-plus'
import useSelect from '@/components/scWorkflow/select.vue'
import { defineAsyncComponent, computed, ref, onBeforeMount, onMounted, onUnmounted, nextTick, watch } from 'vue';
import ZhRow from "@/components/zh-row/index.vue";
let selectVisible = ref(false);
const useselect = ref(null);
const radioDisabled = ref(false);
const props = defineProps({
  form: {
    type: Object,
    default: () => {
      return {
        id: undefined,
        transferIsCommon: '0',
        processKey: undefined,
        transferStartTime: undefined,
        transferEndTime: undefined,
        transferReason: undefined,
        nodeUserList: []
      }
    },
  },
});
const rules = reactive({
  transferIsCommon: [{ required: true, message: '通用标记不能为空', trigger: 'blur' }],
  transferStartTime: [{ required: true, message: '转办开始时间不能为空', trigger: 'blur' }],
  transferEndTime: [{ required: true, message: '转办截至时间不能为空', trigger: 'blur' }],
});
const dictFlag = ref([
  { dictKey: '1', dictValue: '是' },
  { dictKey: '0', dictValue: '否' },
]);
const state = reactive({
  dictData: {} as any,
})
const form = reactive({
  id: undefined,
  transferIsCommon: '0',
  processKey: undefined,
  transferStartTime: undefined,
  transferEndTime: undefined,
  transferReason: undefined,
  nodeUserList: [],
})
// 数据字典初始化
const initDict = () => {
  $api.common.send
      .post('flowLongQuery010', {})
      .then((res) => {
        state.dictData.processNameList = res.result
        state.dictData.processNameList.forEach(item => {
          item.dictValue = item.processName
          item.dictKey = item.processKey
        })
      })
      .catch(() => {
      });
};

const init = () => {
  if(props.form){
    radioDisabled.value = true
    form.id = props.form.id
    form.transferIsCommon = props.form.transferIsCommon
    form.processKey = props.form.processKey
    form.transferStartTime = props.form.transferStartTime
    form.transferEndTime = props.form.transferEndTime
    form.transferReason = props.form.transferReason
    form.nodeUserList = props.form.nodeUserList
  }
  initDict();
}

const selectHandle = (setType,list) =>{
  selectVisible.value = true
  nextTick(() => {
    useselect.value.open(setType, list)
  })
}
const del = ()=> {
  form.nodeUserList = []
}

const getData = ()=> {
  const data = {}
  data.id = form.id
  data.transferIsCommon = form.transferIsCommon
  data.processKey = form.processKey
  data.transferStartTime = form.transferStartTime
  data.transferEndTime = form.transferEndTime
  data.transferReason = form.transferReason
  if(form.nodeUserList.length === 0){
    ElMessage.error("请选择被转办人员");
    return null;
  }
  data.transferUserId = form.nodeUserList[0].id
  data.transferFullName = form.nodeUserList[0].name
  if(data.id){
    data.flag = 'edit'
  }else {
    data.flag = 'save'
  }
  return data
}

onMounted(()=> {
  nextTick(()=> {
    init();
  })
})
defineExpose({
  getData
})
</script>

<style scoped>

</style>